import React, { useEffect, useState } from 'react'
import { Button, SearchBar, Space, Toast, Tag, IndexBar, List, ErrorBlock } from 'antd-mobile'
import _ from 'lodash'


import MyHeader from '../../components/MyHeader'
import { getMaiZuoDataAPI } from '../../api/api'
import { ListItem } from 'antd-mobile/es/components/list/list-item'
import { useDispatch } from 'react-redux'
import { useNavigate } from 'react-router-dom'
import { changeCityInfo } from '../../rtk/reducers/info'


const City = () => {
  const dispatch = useDispatch()
  const router = useNavigate()
  const [flag, setFlag] = useState<boolean>(true)
  const [searchList, setSearchList] = useState<any>([])
  const [hotCity, setHotCity] = useState<any>([])
  const [cityList, setCityList] = useState<any>([])

  // 获取城市列表
  const getCitys = async () => {
    const res: any = await getMaiZuoDataAPI({

    }, {
      'X-Host': 'mall.film-ticket.city.list',
    })
    setCityList(res.data.cities)
    // 热门城市列表
    setHotCity(_.filter(res.data.cities, item => item.isHot == 1))
  }


  useEffect(() => {
    getCitys()
  }, [])

  // 循环字母以及渲染城市
  const charCodeOfA = 'A'.charCodeAt(0)
  const groups = Array(26)
    .fill('')
    .map((_, i) => ({
      title: String.fromCharCode(charCodeOfA + i),
      cityList: []
    }))

  groups.map((item: any) => {
    cityList.map((city: any) => {
      if (city.pinyin.slice(0, 1).toUpperCase() == item.title) {
        item.cityList.push(city)
      }
    })
  })

  // 选中城市
  const chooseCity = (city: any) => {
    dispatch(changeCityInfo(city))
    router(-1)
  }

  // 搜索
  const onSearch = (value: any) => {
    setFlag(false)
    const list = cityList.filter((item: any) => (item.pinyin.indexOf(value) > -1 || item.name.indexOf(value) > -1))
    setSearchList([...list])
  }

  // 取消搜索
  const onCancel = () => {
    setFlag(true)
  }

  return (
    <div>
      <div>
        <MyHeader title='城 市'></MyHeader>
        <div style={{ padding: '5px' }}>
          <SearchBar
            placeholder='请输入内容'
            showCancelButton
            onSearch={onSearch}
            onCancel={onCancel} />
        </div>
      </div>

      {flag ? <div>
        <div style={{ paddingTop: '10px', fontSize: '13px', marginLeft: '5px' }}>
          <p>热门城市</p>
          <div style={{ display: 'flex', textAlign: 'center', justifyContent: 'space-around', padding: '10px 0' }}>
            {
              _.map(hotCity, (item: any) => {
                return (
                  <Tag color='danger' key={item.name} style={{ fontSize: '14px', width: '80px', height: '25px', lineHeight: '22px' }} onClick={() => chooseCity(item)}>{item.name}</Tag>
                )
              })
            }
          </div>
        </div>

        <div style={{ height: '520px' }}>
          <IndexBar >
            {groups.map((group: any) => {
              const { title, cityList } = group
              return (
                <IndexBar.Panel
                  index={title}
                  title={title}
                  key={title}
                  style={{ marginRight: '30px' }}
                >
                  <List>
                    {
                      cityList.map((item: any, index: any) => (
                        <List.Item key={index} onClick={() => chooseCity(item)}>
                          {item.name}
                        </List.Item>
                      ))
                    }
                  </List>
                </IndexBar.Panel>
              )
            })}
          </IndexBar>
        </div>
      </div>
        :
        <div>
          {
            searchList.length > 0 ? <List>
              {
                searchList.map((item: any, index: any) => (
                  <List.Item key={index} onClick={() => chooseCity(item)}>
                    {item.name}
                  </List.Item>
                ))
              }
            </List> :
              <div>
                <ErrorBlock status='empty' />
              </div>
          }
        </div>
      }

    </div>
  )
}

export default City
